import React, {Component} from 'react';
import {Row, Col, Typography, Card, Space } from 'antd';
import {RingProgress} from '@ant-design/plots';

const {Text} = Typography

const DemoRingProgress = () => {
  const config = {
    height: 60,
    width: 60,
    innerRadius: 0.6,
    autoFit: false,
    percent,
    color: ['#f5972e', '#E8EDF3'],
    statistic: {
      title: false,
      content: false,
    }
  };
  return <RingProgress {...config} />;
};


class ProgressCharts extends Component {

  state = {
    data: [
      {
        name: '食品科学与工程',
        progress: 92,
      },
      {
        name: '计算机科学与技术',
        progress: 83,
      },
      {
        name: '临床医学',
        progress: 80,
      },
      {
        name: '生物学',
        progress: 72,
      },
      {
        name: '新材料技术',
        progress: 73,
      },
      {
        name: '物理学',
        progress: 55,
      },
      {
        name: '机械工程',
        progress: 62,
      },
      {
        name: '法学',
        progress: 52,
      },
    ]
  }

  render() {
    const data = this.state.data
    return (
      <>
        <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
          {/*学科进展表格2样式*/}
          <Card title="双一流学科建设完成进度" bordered={false}>
            <Row gutter={24}>
              {
                data.map((item, idx) => {
                  return (<Col key={idx} span={6}>
                    <Card headStyle={{fontWeight: 'bold'}} size="small" title={item.name} bordered={true} style={{marginBottom: 10}}>
                      <Row>
                        <Col span={12}>
                          <Text type="secondary">完成度</Text>
                          <br/>
                          <Text style={{fontSize: 24}}>{item.progress}%</Text>
                        </Col>
                        <Col span={12}>
                          <RingProgress height={80}
                          width={80}
                          innerRadius={0.6}
                          autoFit={false}
                          percent={item.progress / 100}
                          color={['#1890ff', '#E8EDF3']}
                          statistic={{
                            title: false,
                            content: false,
                          }}/>
                        </Col>
                      </Row>
                    </Card>
                  </Col>)
                })
              }
            </Row>
          </Card>
        </Space>
      </>
    );
  }
}

export default ProgressCharts;
